<template>
	<view class="">
		<view id="navbar">
			<NavbarHead :toTop="false" leftTitle="服务" bgColor="rgba(0,0,0,0)"></NavbarHead>
		</view>

		<view class="" :style="{'padding-top':topHeadHeight+ 'rpx' }">

			<view class="lxzj-box">

				<view></view>
				<view class="lxzj-btn">
					<img class="lxzj-img" src="../../static/images/other/kf.png" alt="">
					联系专家
				</view>


			</view>

			<!-- 添加设备 -->
			<view class="tjsb-box" v-if="showAdd">
				<picker mode="selector" range-key="typename" :range="bikeData" @change="bindChange" value="id">
					<view>
						<view class="iconfont icon-tianjia tjsb"></view>
					</view>
					<view class="tjsb-title">添加设备</view>
				</picker>
			</view>

			<view class="tjsb-box sbytj" v-else>
				<view>
					<image :src="basicInfo.img" mode="" class="ebike-img"></image>
				</view>
				<view class="tjsb-title tjsb-code">{{basicInfo.bcode}}</view>
			</view>

			<!-- 服务 -->
			<view class="serve-content">
				<view class="serve-title">添加后可便捷享受以下服务</view>
				<view class="serve-list">
					<view v-for="item in fwData" class="serve-item">
						<view>
							<img class="serve-item-img" :src="item.image" alt="">
						</view>
						<view>{{item.cont1}}</view>
						<view class="serve-item-detail">{{item.cont2}}</view>
					</view>
				</view>
			</view>

			<!-- 帮助中心 -->
			<view class="bzzx-box" @click="navigateTo" data-url="/subPages/helpCenter/helpCenter">
				<view class="bzzx-left">
					<view class="bzzx-title">帮助中心</view>
					<view class="bzzx-content">快速搜索想了解的问题</view>
				</view>
				<view class="bzzx-right">
					<view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>

		</view>



	</view>
</template>

<script>
	import NavbarHead from '../../components/NavbarHead/NavbarHead.vue';

	export default {
		data() {
			return {
				topHeadHeight: 172,
				show: false,
				time: '12:01',
				bikeData: [],
				fwData: null,
				basicInfo: null,
				showAdd: true, //显示是否增加按钮
			}
		},
		components: {
			NavbarHead
		},

		onShow() {
			// 计算顶部导航栏高度
			this.topHeadHeight = uni.getStorageSync('headHeight') * 2;
			this.Geticon();
			this.getbiketype();
			this.getbikeinfo();
		},

		methods: {
			// 跳转函数	
			navigateTo(e) {
				wx.navigateTo({
					url: e.currentTarget.dataset.url,
				})
			},

			// 获取服务
			async Geticon() {
				let res = await this.$api.Geticon({
					type: '	servepage'
				})
				this.fwData = res.data;
			},

			// 获取服务
			async getbiketype() {
				let res = await this.$api.getbiketype()
				this.bikeData = res.data;
			},
			// 绑定设备
			async bindbike(e) {
				console.log(e);
				let params = {
					bcode: e.typename,
					name: e.typename,
					img: e.image.split('wyc.jslhkj.cn')[1]
				};

				let res = await this.$api.bindbike(params)
				this.getbikeinfo()
			},
			// 获取基本信息
			async getbikeinfo() {
				let res = await this.$api.getbikeinfo({
					uid: 9
				})
				if (res.data != null) {
					this.showAdd = false
				}
				this.basicInfo = res.data[0];

			},
			bindChange(e) {
				console.log(e.detail.value);
				let params = this.bikeData[e.detail.value];
				console.log(params);
				this.bindbike(params);
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}
</style>

<style lang="scss" scoped>
	.tjsb-box {
		margin: 40rpx 30rpx 30rpx 30rpx;
		background-color: #eee;
		border-radius: 15rpx;
		height: 220rpx;
		border: 1rpx solid #ccc;
		text-align: center;
	}

	.tjsb {
		font-size: 70rpx;
		margin-top: 60rpx;
		margin-bottom: 10rpx;
	}

	.tjsb-title {
		font-size: 28rpx;
	}

	.serve-content {
		margin-top: 80rpx;
	}

	.serve-title {
		text-align: center;
		font-weight: 700;
		font-size: 28rpx;
		margin-bottom: 40rpx;
	}

	.serve-list {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		font-size: 26rpx;
	}

	.serve-item {
		width: calc(50% - 40rpx);
		text-align: center;
		padding-bottom: 40rpx;
		padding: 0 20rpx;
	}

	.serve-item-img {
		width: 100rpx;
		height: 100rpx;
	}

	.serve-item-detail {
		color: #666;
		font-size: 24rpx;
	}


	.bzzx-box {
		margin: 40rpx 30rpx 30rpx 30rpx;
		background-color: #eee;
		border-radius: 15rpx;
		height: 160rpx;
		display: flex;
		padding: 0 20rpx;
		justify-content: space-between;
		font-size: 28rpx;

		.bzzx-left {
			padding: 40rpx 0;

			.bzzx-title {
				font-weight: 700;
			}

			.bzzx-content {
				color: #666;
				font-size: 26rpx;
				margin-top: 5rpx;
			}
		}

		.bzzx-right {
			line-height: 160rpx;

		}
	}

	.lxzj-box {
		display: none;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.lxzj-btn {
		background-color: #bbb;
		padding: 10rpx 60rpx 10rpx 20rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-weight: 700;
		position: relative;
	}

	.lxzj-img {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 0rpx;
		border-bottom-right-radius: 30rpx;
	}

	.ebike-img {
		width: 200rpx;
		height: 150rpx;
		margin-left: 30rpx;
	}

	.sbytj {
		display: flex;
	}

	.tjsb-code {
		flex: 1;
		line-height: 220rpx;
		font-weight: 700;
		font-size: 32rpx;
	}
</style>